<template>
	<view class="my-card">
<!-- 		<HeaderNav bgcolor='rgba(248, 248, 248, 0.1)' text='我的' :showNavBackBtn='false' color=''></HeaderNav> -->
<HeaderNav bgcolor='#56677c' text='我的' :showNavBackBtn='false' color='#fff'></HeaderNav>

		<view class="my-card-container" >
			<view class="head-head" >
				<view  style="position: relative; ">
					<view class="head-text" >
						<text>
							Hi,欢迎使用 
						</text>
						<view>
							<image style="width: 102rpx; height: 102rpx; position: fixed;top: 325rpx;left: 530rpx; border-radius: 50rpx;" src="../../static/imgs/logo.png"></image>
						</view>
					</view>

					
					<view class="head-text" style="margin-top: 450rpx;">
						<view>
							<text style="font-size: 30rpx; font-weight: bold;">
								我的企业：
							</text>
							<text style="font-size: 30rpx;">{{cn}}</text>
						</view>
						
					</view>
					
					<view class="head-text" style="margin-top: 400rpx;">
						<text style="font-size: 30rpx; font-weight: bold;">
							用户性质：
						</text>
						<text style="font-size: 30rpx;">{{isAdmin}}</text>
					</view>
					
					<view class="head-text" style="margin-top: 350rpx;">
						<text style="font-size: 30rpx; font-weight: bold;">
							手机号码：
						</text>
						<text style="font-size: 30rpx;">{{telephone}}</text>
					</view>
					
					<template >
						<view v-if="isGrant=='是'" class="head-container" @click="report" style="margin-left: 480rpx;">
								<text>生成报告</text>
						</view>
					</template>
					<template v-if="flag && flag1">
						<view class="head-container" @click="GoToEnterpriseId" style="margin-left: 460rpx;">
								<text>授权绑定</text>
						</view>
					</template>
					<image mode="aspectFit" style="width: 90%;
											height: 350rpx;
											border-radius: 50rpx;
											box-shadow: inset 0rpx 0rpx 6rpx 0rpx #ffffff; 
											background-color: rgba(248,248,248,0.1);
											margin-top: 25%;"></image>
				</view>
<!-- 							<text style="font-size: 48rpx;
										color: white;
										text-align: center;
										line-height: 150rpx;
										"> 慢慢</text> -->
				<view class="head-head" style="position: relative;);
												height: 100%; 
												margin-top: -50rpx;">						
					<view class="person-label" style="margin-top: 100rpx;"  @click="GoToEnterpriseDetail">
						<image class="label-img" src="../../static/imgs/icon_lefaewy1dfp/xinxi.png" style="width: 25px; height: 25px; margin-left: 20px;"></image>
							<text>企业信息</text>
						<image class="label-img" src="../../static/icon/goahead.png"></image>
					</view>
					<view class="person-label" @click="GoToAboutUs">
						<image class="label-img" src="../../static/imgs/icon_lefaewy1dfp/xinxi_2.png" style="width: 25px; height: 25px; margin-left: 20px;"></image>
						<text>关于我们</text>
						<image class="label-img" src="../../static/icon/goahead.png"></image>
					</view>
					<view class="person-label" @click="callPhone">
						<image class="label-img" src="../../static/imgs/icon_lefaewy1dfp/xinxi_1.png" style="width: 25px; height: 25px; margin-left: 20px;"></image>
						<text>问题反馈</text>
						<image class="label-img" src="../../static/icon/goahead.png" ></image>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import HeaderNav from '@/common/HeaderNav/HeaderNav'
	import {authorize as authorizeApi} from '@/api/user'
	import {getCompnayInfo as getCompnayInfoApi} from '@/api/user'
	import {getUserInfo as getUserInfoApi} from '@/api/user'
	import {getReport as getReportApi} from '@/api/user'

	export default {
		data() {
			return {
				cid:'',
				uid:'',
				telephone:'',
				isAdmin:'',
				isGrant:'',
				cn:'',
				flag:false,
				flag1:false,
				ordeSN:'',
				value:''
			}
		},
		
		components: {
			HeaderNav
		},
		onShow(){
			this.cid=this.$store.getters.getUser.cid
			this.uid=this.$store.getters.getUser.uid
			// console.log("cid{}"+this.cid)
			this.getCardMessage()
		},
		methods:{
			// 跳转至企业授权
			GoToEnterpriseId(){
				uni.navigateTo({
					url:'/pages/card/card-module/enterprise-id'
				})
			},
			
			//跳转至用户详情
			GoToPersonalDetail(){
				uni.navigateTo({
					url:'/pages/card/card-module/user-details'
				})
			},
			
			//
			callPhone(){
				let that = this
				uni.showActionSheet({
					itemList: ['联系电话：15321000000', 
								'微信客服：20202020'],
					success (res) {
					   // 选择其中任意一项后，获取其索引（res.tapIndex），从0开始
					   // console.log(res.tapIndex) 
					   if(res.tapIndex===0){
						   	that.copy('15321000000')
					   }else{
						   that.copy('20202020')
					   }
					},
					
					fail (res) {
					   // 取消后的操作
					}
					
				})
			},
			
			//关于我们
			GoToAboutUs(){
				uni.showModal({
								title: '衣碳揪镜',
								content: '让服装产品的碳足迹清澈如镜，致力于降低外贸纺织服装企业的碳足迹分析难度，轻松了解碳足迹。',
								showCancel:false,
								success: function (res) {
									if (res.confirm) {
									} else if (res.cancel) {
									}
								}
							});
			},
			
			//企业详情信息
			GoToEnterpriseDetail(){
				if(this.cid===null ){
					uni.showToast({
						icon:'none',title:'未绑定企业'
					})
				}else if(this.isGrant==='否'){
					uni.showToast({
						icon:'none',title:'未授权绑定企业'
					})
				}else{
					uni.navigateTo({
						url:'/pages/card/card-module/enterprise-details'
					})
				}
			},
			async getCardMessage(){
				const data ={
					uid:this.uid
				}
				const res = await getUserInfoApi(data)
				
				if(res.status === this.API_STATUS_CODE.SUCCESS){
					
					this.telephone=res.data.telephone
					this.isAdmin = res.data.isAdmin
					this.isGrant = res.data.isGrant
					if(this.isAdmin==='是'){
						
						this.flag=true
						this.isAdmin="管理员"
					}else{
						this.flag=false
						this.isAdmin="普通用户"
					}
					if(this.isGrant==='否'){
						this.flag1=true
					}else{
						this.flag1=false
					}
				}
				
				if(this.cid === null){
					this.cn = "未绑定"
				}else{
					const data1 ={
						cid:this.cid
					}
					const res1 = await getCompnayInfoApi(data1)
					// console.log(res1)
					if(res1.status === this.API_STATUS_CODE.SUCCESS){
						// console.log("cn="+  res1.data.cn )
						this.cn = res1.data.cn
					}
				}
			},
			//报告生成链接
			report(){
				
			let that = this
				// const date={
				// 	cid:this.cid
				// }
				// console.log(this.cid)
				// const res2  = await getReportApi(this.cid)
				// console.log("res="+res2)
				
				// 一键复制
				// this.ordeSN='http://127.0.0.1:8080/getReport?cid="+this.cid'
				// var cc=this.cid
				uni.showModal({
								title: '衣碳揪镜',
								confirmText:'复制',
								content: "点击复制链接到浏览器中打开下载报告",
								showCancel:true,
							
								success: function (res) {
										if (res.confirm) {
											this.value="https://v43321824b.goho.co/getReport?cid="+that.cid,
											that.copy(this.value)
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
							});
			},
			copy(value) {
			     uni.setClipboardData({ 
			         data: value,
			        success: function () { 
			        //调用方法成功
			        console.log('success');
					}
				})
			 }
		}
	}
</script>

<style lang ="scss" scoped>
	.head-text{	
		position: absolute;
		display: block;
		margin-top: 240rpx;
		margin-left: 100rpx;
		text{
			color:white;
			font-size:54rpx;
		}
	}			
	.head-container{
		position: absolute;
		display: block;
		margin-top: 400rpx;
		color: white;
		box-shadow: inset 0rpx 0rpx 6rpx 0rpx #ffffff; 
		padding: 30rpx;
		border-radius: 50rpx;
		background-color: rgba(248,248,248,0.3);
		width: 150rpx;
		height: 30;
		font-size: 36rpx;
		line-height: 30rpx;
		text-align: center;
		margin-left: 150rpx;
		box-shadow: white;
		text{
			line-height: 30rpx;
		}
	}
	.my-card{
		overflow: hidden;
		background: linear-gradient(to top,#172349,#1d2e55,#203f5f,#4f5e72);
		width: 100%;
		height: 1600rpx;
		text-align: center;
		
		.my-card-container{
			position: relative;
			height: 100%;
			width: 100%;
		}
		
		.head-head{
			position: relative;
			position:absolute;
			display: block;
			margin-top: -10rpx;
			width: 100vw;
			height: 150rpx;
			/* margin-left: 40rpx; */
			margin-right: 40rpx;

			text{
				
			}
			
			
/* 			border-bottom: 2rpx solid #00ff00; */
	
/* 				position: absolute;
				display: block; */
/* 				height: 350rpx;
				width: 90vw;
				border-radius: 20rpx;
				background-color: #254dd3;
				border-bottom: 2rpx solid #00ff00;
				border-top: 2rpx solid #00ff00; */
				.head_image{
					width: 132rpx;
					height: 132rpx;
					border-radius: 50%;
					margin-left: -380rpx;
				}
				
				.name {
						position:absolute;
						display: block;
						width: 100rpx;
						font-size: 36rpx;
				}
				
			.head-title{
				position:absolute;
				display: block;
				width: 90vw;
				height: 200rpx;
				background-color: green;
				.head-name{
					position: relative;
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 340rpx;
					height: 50rpx;
					margin-top: 10rpx;

					text-align: left;
					margin-left: 250rpx;
				}
				
			}
			
			.person-label{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 80vw;
				height: 86rpx;
				margin-top: 40rpx;
				margin-left: 10%;
				border-radius: 20rpx;
				color: white;
				/* background-color: #04abb2; */
				background-color: rgba(255, 255, 255, 0.2);
				text{
					width: 200rpx;
					margin-left: -300rpx;
					line-height: 200rpx;
					margin-top: -5rpx;
					color: #ffffff;
					
				}
				.label-img{
					float: left;
					position: relative;
					width: 30rpx;
					height: 30rpx;
					bottom: 8rpx;
					line-height: 86rpx;
					margin-right: 50rpx;
					margin-top: 16rpx;
				}
			}
		}
		
	}
	
</style>